<template>
  <div class="case_data">
	  <head-back-title title="案例详情"></head-back-title>
		<el-card>
			<el-form :model="caseForm" ref="caseForm" :rules="caseFormRules" label-width="120px">
				<el-row>
					<div class="title">案例基本信息</div>
					<el-col :span="6">
						<el-form-item label="案例名称:" prop="case_name">
						  <el-input :disabled="disabled" v-model="caseForm.case_name" placeholder="请输入案例名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="风格:" prop="style_id">
							<el-select :disabled="disabled" v-model="caseForm.style_id" placeholder="请选择风格">
								<el-option v-for="item in styleList" :key="item.style_id" :label="item.style_name" :value="item.style_id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="平方数:" prop="square">
							<el-input :disabled="disabled" v-model="caseForm.square" placeholder="请输入平方数"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="空间类型:" prop="space">
							<el-select :disabled="disabled" v-model="caseForm.space" placeholder="请选择空间类型">
								<el-option v-for="item in apace_list" :key="item" :label="item" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="商品编号:" prop="goods_sn">
							<el-input :disabled="disabled" v-model="goods_sn" placeholder="请输入商品编号,多个编号用“,”隔开"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24"></el-col>
					<el-col :span="12">
						<el-form-item label="简介:">
						  <el-input :disabled="disabled" type="textarea" v-model="caseForm.brief" rows="3"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24"><div class="title">案例图片&视频上传 <el-tag>图片仅限JPG/PNG格式，视频仅限MP4/AVI格式</el-tag></div></el-col>
					<div class="clearfix"></div>
					<div class="case_upload clearfix">
						<el-col :span="6">
							<el-form-item label="上传主图:" class="upload-box" prop="image">
							  <div class="case-img-upload">
									<div class="case-img-upload-btns">
										<el-upload disabled ref="upload" action="fakeaction" :show-file-list="false" :http-request="function (res) { return upload(res,1)}">
											<el-button disabled type="primary" size="small">上传图片</el-button>
										</el-upload>
										<div class="el-upload__tip">小于500KB</div>
									</div>
									<div class="case-img-upload-imgs">
										<el-image :src="caseForm.image"><div slot="error"></div></el-image>
									</div>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="18">
							<el-form-item label="上传附图:" class="upload-box" prop="vice_big">
							  <div class="case-img-upload">
							  	<div class="case-img-upload-btns">
										<el-upload disabled ref="upload" action="fakeaction" :show-file-list="false" :http-request="function (res) { return upload(res,2)}" multiple accept="image/*"><el-button disabled type="primary" size="small">上传图片</el-button></el-upload>
							  		<el-button disabled type="danger" size="small" @click="rest('vice')">重置</el-button>
							  		<div class="el-upload__tip">小于500KB</div>
							  	</div>
							  	<div class="case-img-upload-imgs">
							  		<el-image v-if="!vice_big.length"><div slot="error"></div></el-image>
										<div v-for="(data,index) in vice_big" :key="index" class="vice_big_box" v-else>
											<!-- <i class="el-icon-error" @click="delVice(index,1)"></i> -->
											<el-image :preview-src-list="vice_big_preview" :src="data.image" fit="contain"></el-image>
										</div>
							  	</div>
							  </div>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="上传视频:" class="upload-box">
							  <div class="case-img-upload">
							  	<div class="case-img-upload-btns">
										<el-upload disabled ref="upload" action="fakeaction" :show-file-list="false" :http-request="function (res) { return uploadVideo(res,1)}"  accept="video/mp4,avi"><el-button disabled type="primary" size="small">上传视频</el-button></el-upload>
							  		<el-button disabled type="danger" size="small" @click="rest('video')">重置</el-button>
							  		<div class="el-upload__tip">小于20MB</div>
							  	</div>
							  	<div class="case-img-upload-imgs">
							  		<el-image v-show="!caseForm.video"><div slot="error"></div></el-image>
										<div class="vice_big_box" style="width: 500px; margin-left: 25px;" v-show="caseForm.video">
											<video-player :disabled="disabled" id="video" ref="videoPlayer" class="vjs-custom-skin" :playsinline="true" :options="playerOptions"/>
										</div>
							  	</div>
							  </div>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="上传详情图:" class="upload-box" prop="img_info">
							  <div class="case-img-upload">
							  	<div class="case-img-upload-btns">
							  		<el-upload
									disabled
									  :show-file-list="false"
							  		  :action="`${$domain}api/Upimg/UpInfoImg`"
									  :data="upImage"
									  :on-success="upSuccess"
							  		  multiple>
									  <el-button disabled type="primary" size="small">上传图片</el-button>
							  		</el-upload>
									<el-button disabled type="danger" size="small" @click="rest('infoImg')">重置</el-button>
							  		<div class="el-upload__tip">小于500KB</div>
							  	</div>
							  	<div class="case-img-upload-imgs-info">
										<div v-for="(data,index) in img_info" :key="index" class="case-img-upload-imgs-info-box">
											<!-- <i class="el-icon-error" @click="delVice(index,2)"></i> -->
											<el-image :preview-src-list="img_info_preview" :src="data.image"></el-image>
										</div>
							  	</div>
							  </div>
							</el-form-item>
						</el-col>
					</div>
				</el-row>
			</el-form>
			<div style="margin-top: 30px;" v-if="caseForm.examine_status == 0">
				<el-button type="primary" @click="operate(0)" style="margin-left: 100px;">审核</el-button>
				<el-button type="danger" @click="operate(1)" style="margin-left: 40px;">拒绝</el-button>
			</div>
		</el-card>
		<!-- 拒绝原因弹框 -->
		<el-dialog title="拒绝原因" :visible.sync="remarksDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="remarksForm" :rules="remarksFormRules" ref="remarksForm" label-width="120px">
				<el-form-item label="拒绝原因:" prop="reason">
					<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="remarksForm.reason"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="remarksDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmClick('remarksForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import md5 from 'md5'
	export default {
		data(){
			return{
				remarksDialog: false,
				remarksForm: {
					reason: ''
				},
				remarksFormRules: {
					reason: [{ required: true, message: '请输入内容' }]
				},
				disabled: false,
				type:'',
				admin_id: localStorage.getItem('admin_id'),
				upImage:{
					timestamp : Math.round(new Date() * 1000),
					key : localStorage.getItem('token'),
					port : 'pc',
				},
				mainUploadUrl: this.$ApiList.mainUpload.url,
				styleList: [],
				apace_list: [],
				vice_big: [],
				vice_middle: [],
				img_info: [],
				vice_big_preview: [],
				img_info_preview: [],
				goods_sn: '',
				caseForm: {
					case_name: '',
					style_id: '',
					square: '',
					space: '',
					goods_sn: this.goods_sn,
					brief: '',
					image: '',
					image_middle: '',
					image_thumb: '',
					vice_big: '',
					vice_middle: '',
					img_info: '',
					video: 0
				},
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
					autoplay: false, // 如果true,浏览器准备好时开始回放。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: 'video/mp4',
						src: ''
					}],
					hls: true,
					poster: '', // 你的封面地址
					width: '500px', // 播放器宽度
					notSupportedMessage: '此视频暂无法播放，请稍后再试'
				},
				// 需要对比的数据
				compared: {
					goods_sn: '',
					vice_big: '',
					vice_middle: '',
					img_info: ''
				},
				caseFormRules: {
					case_name: [
						{ required: true, message: '请输入案例名称', tigger: 'blur'}
					],
					style_id: [
						{ required: true, message: '请选择风格', tigger: 'change'}
					],
					square: [
						{ required: true, message: '请输入平方数', tigger: 'blur'}
					],
					space: [
						{ required: true, message: '请输入空间类型', tigger: 'blur'}
					],
					image: [
						{ required: true, message: '请上传主图'}
					],
					vice_big: [
						{ required: true, message: '请上传至少一张附图'}
					],
					img_info: [
						{ required: true, message: '请上传至少一张详情图'}
					]
				}
			}
		},
		methods: {
			init(){
				this.type = this.$route.query.type
				// type 0编辑 1 详情
				if (this.type == 1) {
					this.disabled = true;
				}
				let data = {
					id: this.$route.query.id
				};
				this.$http(this.$ApiList.ExamineInfo,data).then(res => {
					this.styleList = res.datas.style_list
					this.apace_list = res.datas.apace_list
					if(res.datas.list.case_id){
						this.playerOptions.poster = res.datas.list.image
						// 界面详情图
						this.img_info = res.datas.list.img_info
						// 弹窗详情图
						this.img_info.forEach(item => {
							this.img_info_preview.push(item.image)
						})
						this.vice_big = res.datas.list.vice_big
						// 弹窗附图
						this.vice_big.forEach(item => {
							this.vice_big_preview.push(item.image)
						})
						// 附图
						this.vice_middle = res.datas.list.vice_middle
						// 保存字段对比
						let vice_big = [],
								vice_middle = [],
								img_info = []
								
						res.datas.list.vice_big.forEach(item => {
							vice_big.push(item.image)
						})
						res.datas.list.vice_middle.forEach(item => {
							vice_middle.push(item.image)
						})
						res.datas.list.img_info.forEach(item => {
							img_info.push(item.image)
						})
						
						this.compared = {
							goods_sn: res.datas.list.goods_sn,
							vice_big: vice_big.join(','),
							vice_middle: vice_middle.join(','),
							img_info: img_info.join(',')
						},
						this.goods_sn = res.datas.list.goods_sn
						this.caseForm = {
							examine_status: res.datas.list.examine_status,
							examine_id: res.datas.list.examine_id,
							case_name: res.datas.list.case_name,
							style_id: res.datas.list.style_id.toString(),
							square: res.datas.list.square.toString(),
							space: res.datas.list.space,
							goods_sn: res.datas.list.goods_sn,
							brief: res.datas.list.brief,
							image: res.datas.list.image,
							image_middle: res.datas.list.image_middle,
							image_thumb: res.datas.list.image_thumb,
							vice_big: res.datas.list.vice_big,
							vice_middle: res.datas.list.vice_middle,
							img_info: res.datas.list.img_info,
							video: res.datas.list.video!=0?res.datas.list.video:''
						}
						this.playerOptions.sources[0].src = res.datas.list.video!=0?res.datas.list.video:''
					}
				})
			},
			// 图片上传
			upload(params,type) {
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt500KB = file.size / 1024 <= 500;
				if (!isJPGPNG) {
					this.$message.error("只能上传图片格式png、jpg!");
					return;
				}
				if (!isLt500KB) {
					this.$message.error("图片不能大于500K!");
					return;
				}
				const form = new FormData();
				form.append("file[]", file);
				switch (Number(type)){
					case 1:
						this.$http(this.$ApiList.mainUpload,form).then(res => {
							this.caseForm.image = res.datas[0].major_img_big
							this.caseForm.image_middle = res.datas[0].major_img_middle
							this.caseForm.image_thumb = res.datas[0].major_img_thumb
						})
						break;
					case 2:
						if(this.$route.query.id){
							form.append('type',1)
							form.append('case_id',this.$route.query.id)
							this.$http(this.$ApiList.AddCaseImg,form).then(res => {
								this.vice_big_preview.push(res.datas[0].imgUrl)
								this.vice_big.push({
									image: res.datas[0].imgUrl,
									case_image_id: res.datas[0].image_id
								})
								this.vice_middle.push({
									image: res.datas[0].imgUrl,
									case_image_id: res.datas[0].image_id
								})
							})
						}else{
							let index = 0
							this.$http(this.$ApiList.viceUpload,form).then(res => {
								this.vice_big_preview.push(res.datas[0].vice_img_big)
								this.vice_big.push({
									image: res.datas[0].vice_img_big,
									case_image_id: index++
								})
								this.vice_middle.push({
									image: res.datas[0].vice_img_middle,
									case_image_id: index++
								})
							})
						}
						break;
					case 3:
					// 上传详情图
						let index = 0
						if(this.$route.query.id){
							form.append('type',3)
							form.append('case_id',this.$route.query.id)
							this.$http(this.$ApiList.AddCaseImg,form).then(res => {
								this.img_info_preview.push(res.datas[0].imgUrl)
								this.img_info.push({
									image: res.datas[0].imgUrl,
									case_image_id: res.datas[0].image_id
								})
							})
						}else{
							this.$http(this.$ApiList.infoImgUpload,form).then(res => {
								this.img_info_preview.push(res.datas[0])
								this.img_info.push({
									image: res.datas[0],
									case_image_id: index++
								})
							})
						}
						break;
				}
			},
			// 视频上传
			uploadVideo(params,type){
				const file = params.file,
					isLt20MB = file.size / 1024 /1024 < 20;
				if (!isLt20MB) {
					this.$message.error("视频不能大于20MB！");
					return;
				}
				const form = new FormData();
				form.append("file[]", file);
				this.$http(this.$ApiList.UpVideo,form).then(res => {
					this.caseForm.video = res.datas
					this.$nextTick(() => {
						this.playerOptions.sources[0].src = res.datas
					})
				})
			},
			// 重置图片
			rest(type){
				switch (type){
					case 'vice':
						this.vice_big = []
						this.vice_middle = []
						break;
					case 'infoImg':
						this.img_info = []
						this.img_info_preview = []
						
						break;
				}
			},
			// 删除附图
			delVice(index,type){
				if(this.type == 1){
					return
				}
				this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let id = ''
					if(type==1){
						id = this.vice_big[index].case_image_id
					}else{
						if(this.$route.query.id == undefined){
							this.img_info.splice(index,1)
							return
						}else{
							id = this.img_info[index].case_image_id
						}		
					}
					let data = {
						case_image_id: id
					}
					this.$http(this.$ApiList.DelCaseImg,data).then(res => {
						if(type==1){
							this.vice_big.splice(index,1)
							this.vice_middle.splice(index,1)
						}else{
							this.img_info.splice(index,1)
						}
					})
				}).catch(() => {
										
				});
			},
			upSuccess(response, file, fileList){
				this.img_info_preview.push(file.response.datas[0]);
				this.img_info.push({
					image: file.response.datas[0]
				});
			},
			getSign(){
				let data = this.upImage
				// 获取签名开始
				let obj = 'jjds2020+'
				let newObj = this.objKeySort(data)
				for (let i in newObj){
					obj += i + '=' + newObj[i] +'&'
				}
				obj = obj.substring(0, obj.length - 1)
				obj += '+jjds2020'
				obj = md5(obj)
				obj = obj.toUpperCase()
				// 获取签名结束
				this.upImage.sign = obj
			},
			// 参数排序
			 objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
						newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			// 0 审核 1 拒绝
			operate(type) {
				let data = {
					examine_id: this.caseForm.examine_id
				};
				switch (type) {
					case 0:
						this.$http(this.$ApiList.ExamineSuccess, data).then(res => {
								this.$layer.msg('操作成功');
								setTimeout(()=>{
									this.goBack()
								},1000)
						});
						break;
					case 1:
					this.remarksDialog = true
					this.remarksForm.examine_id = this.caseForm.examine_id
						break;
				}
			},
			//提交
			confirmClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$http(this.$ApiList.ExamineRefuse, this.remarksForm).then(res => {
								this.$layer.msg('操作成功');
								this.remarksDialog = false
								this.init()
								setTimeout(()=>{
									this.goBack()
								},1000)
						});
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
		},
		created(){
			this.$nextTick(() => {
				this.init()
				this.getSign()
			})
		}
	}
</script>
<style lang="scss">
	.case_data{
		.last{
			margin-bottom: 0;
		}
		.upload-drag{
			.el-upload{
				vertical-align: top;
			}
			.el-upload__tip{
				line-height: normal;
			}
		}
		.case_upload{
			display: flex;
			flex-wrap: wrap;
			.el-col{
				
			}
		}
		.el-select{
			display: block;
		}
		.upload-box{
			padding-left: 40px;
			.case-img-upload{
				display: flex;
				.case-img-upload-imgs{
					flex: 1;
					align-items: flex-start;
					.el-image{
						width: 140px;
						height: 140px;
						border: solid 1px #E5E5E5;
						margin-left: 25px;
						vertical-align: top;
					}
				}
				.case-img-upload-imgs-info{
					width: 100%;
					max-width: 660px;
					border: solid 1px #E5E5E5;
					margin-left: 25px;
					min-height: 390px;
					.case-img-upload-imgs-info-box{
						position: relative;
						.el-icon-error{
							position: absolute;
							font-size: 20px;
							color: #ef3030;
							right: 5px;
							top: 5px;
							z-index: 1;
							background-color: #FFF;
							border-radius: 50%;
							cursor: pointer;
						}
					}
					.el-image{
						width: 100%;
						vertical-align: top;
					}
				}
				.vice_big_box{
					position: relative;
					display: inline-block;
					vertical-align: top;
					margin-bottom: 20px;
					.el-icon-error{
						position: absolute;
						font-size: 20px;
						color: #ef3030;
						right: 5px;
						top: 5px;
						z-index: 1;
						background-color: #FFF;
						border-radius: 50%;
						cursor: pointer;
					}
				}
			}
			.el-upload__tip{
				width: 80px;
				text-align: center;
			}
			.el-form-item__label{
				float: none;
			}
			.el-form-item__content{
				margin-left: 0 !important;
				.el-button--danger{
					width: 80px;
					background-color: #37C1D6;
					border-color: #37C1D6;
				}
			}
		}
	}
</style>